.saved-spaces-list {
  background: white;
  border-radius: 4px;
  user-select: none;
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 0px;
  position: relative;
  margin: 2px 0 5px;
  padding: 0;

  &:before {
    content: "";
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: 22px;
    background: orange;
  }

  a {
    -webkit-user-drag: none;
  }

  li {
    list-style-type: none;
    display: flex;
    align-items: center;

    &:hover {
      background: linear-gradient(
        to right,
        transparentize($white-5, 0.7),
        transparentize($white-5, 0.95)
      );
    }

    &:active {
      background: linear-gradient(
        to right,
        transparentize($white-5, 0.5),
        transparentize($white-5, 0.95)
      );
      transition: color 700ms 50ms;
      color: lighten($aqua, 35%);
    }
  }

  .space-link {
    @include label-small;
    color: $aqua;
    display: flex;
    align-items: center;
    text-decoration: none;
    flex: 1;
    height: 25px;
    margin: 0 2px;
    width: 95%;
    padding-left: 22px;
    cursor: default;

    .using-keyboard &:focus {
      outline: none;
      background: $blue;
      color: white;
      svg {
        fill: white;
      }
    }

    &:hover {
      background: #f0f0f0;
    }
  }

  .current-space-link {
    outline: none;
    background: $blue;
    color: white;
    border-radius: 5px;

    .space-icon {
      fill: white;
      stroke: white;
    }

    .small-progress-bar {
      .progress-track {
        background-color: rgba(0, 0, 0, 0.15);
      }
      .progress-fill {
        background-color: $white-1;
      }
    }

    &:hover {
      background: $blue;
    }
  }

  .space-icon {
    fill: $slate;
    stroke: $slate;
    width: 13px;
    height: 13px;
    flex-shrink: 0;
  }

  .name {
    display: block;
    padding-left: 6px;
    overflow-x: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .small-progress-bar {
    width: 100px;
    margin: 0px 5px;
  }
}
